<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();%>
<%String contextPath = request.getContextPath();%>
<jsp:include page="inc.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<script type="text/javascript">

	/* jquery入口*/
	$(function() {
		loadgrid(); //加载datagrid
	});
	/* 加载datagrid列表*/
	function loadgrid() {
		$('#grid').datagrid({
			title : '角色',
			url : '',
			loadMsg : '正在加载…', //当从远程站点载入数据时，显示的一条快捷信息。
			fit : true, //窗口自适应
			nowrap : false, //设置为true，当数据长度超出列宽时将会自动截取
			fitColumns : true, // 自动适应列宽
			singleSelect : true, // 每次只选中一行
			sortName : 'customerNo', //默认排序字段
			sortOrder : 'asc', // 升序asc/降序desc
			striped : true, // 隔行变色  
			pagination : true, // 在底部显示分页工具栏
			pageNumber : 1, //初始化页码 
			pageSize : 20, // 指定每页的大小，服务器要加上page属性和total属性
			pageList : [ 20, 30, 50 ], // 可以设置每页记录条数的列表，服务器要加上rows属性
			//rownumbers : true, // 在最前面显示行号 
			idField : 'id', // 主键属性
			// 冻结列,当很多咧出现滚动条时该列不会动
			frozenColumns : [ [ {
				title : '序号',
				width : '100',
				field : 'id',
				sortable : true
			}, {
				title : '用户编号',
				width : '100',
				field : 'roleName',
				sortable : true
			}, {
				title : '用户名',
				width : '100',
				field : 'customerName',
				sortable : true
			}, {
				title : '用户密码',
				width : '100',
				field : 'customerName',
				sortable : true
			}, {
				title : '所属角色',
				width : '500',
				field : 'customerName',
				sortable : true
			} ] ],
			// 工具栏按钮
			toolbar : '#tb'
		});
	}
	/* 显示Dialog*/
	function openDialog(title) {
		$("#dialog").dialog({
			resizable : false,
			modal : true,
			buttons : [ { //设置下方按钮数组
				text : '保存',
				iconCls : 'icon-save',
				handler : function() {
					save();
				}
			}, {
				text : '取消',
				iconCls : 'icon-cancel',
				handler : function() {
					closeDialog();
				}
			} ]
		});
		$("#dialog").dialog('setTitle', title);
		$("#dialog").dialog('open');
	}
	/* 关闭Dialog*/
	function closeDialog() {
		$("#form").form('clear'); // 清空form的数据
		$("#dialog").dialog('close');// 关闭dialog
	}

	/* 添加数据*/
	function add() {
		openDialog('添加'); // 显示添加数据dialog窗口
		$("#form").form('clear'); // 清空form的数据
		url = 'CustomerController?method=addCustomer'; //后台添加数据action
	}

	/* 修改数据*/
	function edit() {
		var row = $('#grid').datagrid('getSelected'); //// 得到选中的一行数据
		//如果没有选中记录
		if (row == null) {
			$.messager.alert("提示", "请选择一条记录", 'info');
			return;
		}
		openDialog('修改'); // 显示更新数据dialog窗口
		$("#form").form('load', row); // 加载选择行数据
		url = 'CustomerController?method=updateCustomer&id=' + row.id; //后台更新数据action 
	}

	/* 保存数据*/
	function save() {
		$('#form').form('submit', {
			url : url, //提交地址
			onSubmit : function() {
				return $(this).form('validate'); //前台字段格式校验
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.success) {
					closeDialog();// 调用closeDialog;    
					reload();// 重新加载
					$.messager.show({ //显示正确信息
						title : '提示',
						msg : result.msg
					});
				} else {
					$.messager.show({ //显示错误信息
						title : '错误',
						msg : result.msg
					});
				}
			}
		});
	}

	/* 删除数据*/
	$(function() {
		$('#remove').bind('click', function() {
			var row = $('#grid').datagrid('getSelected');
			//如果没有选中记录
			if (row == null) {
				$.messager.alert("提示", "请选择一条记录", 'info');
				return;
			}
			$.messager.confirm('确认', '确定要删除吗？', function(r) {
				if (r) {
					//提交到后台的action
					$.post('CustomerController?method=deleteCustomer', {
						id : row.id
					}, function(result) {
						if (result.success) {
							reload();
							$.messager.show({ //显示正确信息
								title : '提示',
								msg : result.msg
							});
						} else {
							$.messager.show({ //显示错误信息
								title : '错误',
								msg : result.msg
							});
						}
					}, 'json');
				}
			});
		});
	});

	/* 刷新grid*/
	function reload() {
		$('#grid').datagrid('reload');
	}

	/* 删除左右两端的空格 */
	function trim(str) {
		return str.replace(/(^\s*)|(\s*$)/g, "");
	}
</script>
<body>
<div style="width:100%;height:100%;padding:0px;overflow:hidden">
		<table id="grid"></table>
	</div>
	<div id="dialog" class="easyui-dialog" data-options="closed:true" title="权限管理" style="width:250px;height:200px;text-align:center" >
              <form id="form" method="post">
                     <div>
                        <label>用户名</label>
                        <input name="customerNo" class="easyui-validatebox"  data-options="required:true" />
                 </div>
                 <div>
                        <label>用户编号</label>
                        <input name="customerName" class="easyui-validatebox"  data-options="required:true" />
                 </div>
                 <div>
                        <label>用户密码</label>
                        <input name="telephone" class="easyui-validatebox"  data-options="required:false" />
                 </div>
                 <div>
                        <label>所属角色</label>
                        <input name="address" class="easyui-validatebox"  data-options="required:false"/>
                 </div>
              </form>
       </div>
     <div id='tb'>
     	<a class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="add()">添加</a>
     	<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="edit()">编辑</a>
		<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a id="remove" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" >删除</a>
		<div style="height:30px; width:1px; border-left:1px #cccecd solid;display:inline"></div>
		<a class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true" onclick="reload()">刷新</a>
     </div>
</body>
</html>